<template>
    <div class="echartsAll">
        <a href="https://echarts.apache.org/zh/index.html" target="_blank">
            <a-tooltip>
                <template slot="title">
                    点击查看文档
                </template>
                <img src="https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4031768464,1202101491&fm=15&gp=0.jpg" alt="">
            </a-tooltip>
        </a>
        <a-button-group style="margin: 20px 0;">
            <a-button type="primary" v-for="(item,index) in menuList" :key="index">
                <router-link :to="item.path" tag="a">
                    {{item.name}}
                </router-link>
            </a-button>
        </a-button-group>
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        name: "index",
        data() {
            return {
                menuList: [
                    {
                        path: "/echarts/chart",
                        name: "饼状图+条形图+折线图"
                    },
                    {
                        path: "/echarts/map",
                        name: "地图+条形图+折线图"
                    },
                    {
                        path: "/echarts/radar",
                        name: "雷达图"
                    },
                    {
                        path: "/echarts/gplot",
                        name: "拓扑图"
                    },
                    {
                        path: "/echarts/ganttChart",
                        name: "甘特图" 
                    }
                ]
            }
        }
    }
</script>

<style lang="less" scoped>
    .echartsAll {
        position: relative;

        img {
            position: absolute;
            width: 100px;
            left: 3%;
            top: 0;
        }

        a {
            font-weight: bold;
            color: #2c3e50;

            &.router-link-exact-active {
                color: white;
            }
        }
    }
</style>